<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>原生JS实现购物车结算功能代码</title>
    <link rel="stylesheet" href="../css/style.css" />
    <!-- <script src="../js/gouWuChe.js"></script> -->
</head>

<body>
    <div class="catbox">
        <table id="cartTable">
            <thead>
                <tr>
                    <th><label>
                            <input class="check-all check" type="checkbox" />&nbsp;&nbsp;全选</label></th>
                    <th>商品</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>小计</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                    <td class="goods"><img src="../images/1.jpg" alt="" /><span>Casio/卡西欧 EX-TR350</span></td>
                    <td class="price">5999.88</td>
                    <td class="count"><span class="reduce"></span>
                        <input class="count-input" type="text" value="1" />
                        <span class="add">+</span>
                    </td>
                    <td class="subtotal">5999.88</td>
                    <td class="operation"><span class="delete">删除</span></td>
                </tr>
                <tr>
                    <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                    <td class="goods"><img src="../images/2.jpg" alt="" /><span>Canon/佳能 PowerShot SX50 HS</span></td>
                    <td class="price">3888.50</td>
                    <td class="count"><span class="reduce"></span>
                        <input class="count-input" type="text" value="1" />
                        <span class="add">+</span>
                    </td>
                    <td class="subtotal">3888.50</td>
                    <td class="operation"><span class="delete">删除</span></td>
                </tr>
                <tr>
                    <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                    <td class="goods"><img src="../images/3.jpg" alt="" /><span>Sony/索尼 DSC-WX300</span></td>
                    <td class="price">1428.50</td>
                    <td class="count"><span class="reduce"></span>
                        <input class="count-input" type="text" value="1" />
                        <span class="add">+</span>
                    </td>
                    <td class="subtotal">1428.50</td>
                    <td class="operation"><span class="delete">删除</span></td>
                </tr>
                <tr>
                    <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                    <td class="goods"><img src="../images/4.jpg" alt="" /><span>Fujifilm/富士 instax mini 25</span></td>
                    <td class="price">640.60</td>
                    <td class="count"><span class="reduce"></span>
                        <input class="count-input" type="text" value="1" />
                        <span class="add">+</span>
                    </td>
                    <td class="subtotal">640.60</td>
                    <td class="operation"><span class="delete">删除</span></td>
                </tr>
            </tbody>
        </table>
        <div class="foot" id="foot">
            <a class="fl" id="deleteAll" href="javascript:;">删除</a>
            <div class="fr closing" onclick="getTotal();">结 算</div>
            <input type="hidden" id="cartTotalPrice" />
            <div class="fr total">合计：￥<span id="priceTotal">0.00</span></div>
            <div class="fr selected" id="selected">已选商品<span id="selectedTotal">0</span>件<span
                    class="arrow up">︽</span><span class="arrow down">︾</span></div>
            <div class="selected-view">
                <div id="selectedViewList" class="clearfix">
                    <div><img src="../images/1.jpg"><span>取消选择</span></div>
                </div>
                <span class="arrow">◆<span>◆</span></span>
            </div>
        </div>
    </div>



</body>
<script>
    var checkAll = document.getElementsByClassName("check-all")[0];//全选
    var checkOneList = document.getElementsByClassName("check-one");//反选
    var addList = document.getElementsByClassName("add");//增加
    var reduceList = document.getElementsByClassName("reduce");//减少
    var deleteList = document.getElementsByClassName("delete");//单删
    var deleteAllBtn = document.getElementById("deleteAll");//多删
    var selectedTotal = document.getElementById("selectedTotal");//已选商品

    //全选
    checkAll.onclick = function () {

        var status = checkAll.checked;
        // console.log(status);

        for (var i = 0; i < checkOneList.length; i++) {
            var checkOne = checkOneList[i];
            checkOne.checked = status;
        }

        //结算
        getTotal();
    }

    //反选
    for (let i = 0; i < checkOneList.length; i++) {
        let checkOne = checkOneList[i];

        checkOne.onclick = function () {

            checkAll.checked = isAllChecked(checkOneList);


            //结算
            getTotal();
            
        }
    }



    // 增加(+号点击)
    for (let i = 0; i < addList.length; i++) {
        let add = addList[i];

        add.onclick = function () {

            //输入框  数量 加一
            // countInputList[i].value++;
            preve(this).value++;

            //小计增加
            var sum = preve(this).value * preve(parent(this)).innerText;
            next(parent(this)).innerText = sum.toFixed(2);

            //-号出现
            preve(preve(this)).innerText = "-";

            //结算
            getTotal();

        }
    }



    //减号点击
    for (let i = 0; i < reduceList.length; i++) {
        let reduce = reduceList[i];

        reduce.onclick = function () {

            //输入框  数量 减一
            if (next(this).value != 1) {
                next(this).value--;
            }

            //小计减少
            var sum = next(this).value * preve(parent(this)).innerText;
            next(parent(this)).innerText = sum.toFixed(2);

            //-号消失
            if (next(this).value == 1) {
                this.innerText = "";
            }

            //结算
            getTotal();

        }
    }

    // 单删
    for (let i = 0; i < deleteList.length; i++) {
        let deletes = deleteList[i];

        deletes.onclick = function () {
            let re = confirm("是否确认删除？");

            if (re) {
                var aloneDel = parent(parent(this));
                console.log(aloneDel);
                aloneDel.remove();
            }

            checkAll.checked = isAllChecked(checkOneList);

            //结算
            getTotal();

        }
    }

    // 多删
    deleteAll.onclick = function () {

        //如果有商品才运行以下代码
        if (checkOneList.length > 0) {
            var len = document.querySelectorAll(".check-one:checked");

            // 如果有选中的商品才执行
            if (len.length > 0) {
                let re = confirm("是否确认删除？");

                for (let i = 0; i < checkOneList.length; i++) {
                    let checkOne = checkOneList[i];

                    // 如果有被选中的且点击确认后 再删除
                    if (checkOne.checked && re) {
                        var allDel = parent(parent(checkOne));
                        allDel.remove();
                        i--;
                    }
                }

            } else if (len.length == 0) {
                confirm("请选择至少一件商品");
            }
        }

        if (checkOneList.length == 0) {
            checkAll.checked = false;
        }

        //结算
        getTotal();
    }


    //当前元素的前一个元素
    function preve(ele) {
        return ele.previousElementSibling || ele.previousSibling;
    }
    //当前元素的后一个元素
    function next(ele) {
        return ele.nextElementSibling || ele.nextSibling;
    }
    //当前元素的父元素
    function parent(ele) {
        return ele.parentElement;
    }

    //反选，如果全被选中，则返回true
    function isAllChecked(list) {
        var flag = true;
        for (var j = 0; j < list.length; j++) {
            var item = list[j];
            if (!item.checked) {
                flag = false;
                break;
            }
        }
        return flag;
    }

    // 找到所有单选中 所有为选中状态的商品 累加数量和小计
    function getTotal() {
        var sum = 0;
        var allPrice = 0;
        for (var j = 0; j < checkOneList.length; j++) {
            var checkOne = checkOneList[j];
            if (checkOne.checked) {
                var tr = parent(parent(checkOne));
                var countInp = tr.getElementsByClassName("count-input")[0];
                var subtotalTd = tr.getElementsByClassName("subtotal")[0];
                var num = countInp.value * 1;
                var subtotal = subtotalTd.textContent * 1;

                sum += num;
                allPrice += subtotal;
            }
        }

        // console.log(sum, allPrice);
        selectedTotal.textContent = sum;
        priceTotal.textContent = allPrice.toFixed(2);
    }
</script>

</html>